<template>
	<section>
		<header class="bbtm  w100 wallfff" v-if="isHerde"> 
			<a href="javascript:history.back()" class="_h"><i class="iconfont icon-Goback"></i></a>
			<h1 class="sz36 hue333 flex_core fontwt hei100  record">
				<span v-for="(item,index) in haders" :class="{active:index===cord}" @click="changNUM(index)" >{{item.name}}</span>
				<!--<span class="active">充值记录</span><span>购卡记录</span>-->
			</h1>
		</header>
		<div v-if="cord===0">
			<ul class="items" v-if="ifnullOne">
				<li class="item-li" v-for="item in recordOne"> 
					<h4>+{{item.OilCardRecharge_RechargePrice}}元  <span>{{item.OilCardRecharge_Mark}}</span> </h4>
					<p>{{item.OilCard_Num}}<span>{{item.OilCardRecharge_ApplyTime}}</span> </p>
				</li>
			</ul>
			<div class="nullShow" v-else>
				<i><img src="../../assets/Buying/pic_zanwuneirong.png"/></i>
				<p class="null_p1">你还没有充值过~</p> 
			</div> 
		</div>
		<div v-else>
			<ul class="items" v-if="ifnullTwo">
				<li class="item-li" v-for="item in recordTwo"> 
					<h4>{{item.EntityOilCardOrder_Price}}元  <span>{{item.EntityOilCardOrder_Mark}}</span> </h4>
					<p><font>物流单号 :{{item.Logistics_Number}}</font><br><font>收货地址:{{item.EntityOilCardOrder_ReceiveAddress}}</font><span>{{item.EntityOilCardOrder_PayTime}}</span> </p>
				</li>
			</ul>
			<div class="nullShow" v-else>
				<i><img src="../../assets/Buying/pic_zanwuneirong.png"/></i>
				<p class="null_p1">你还没有购买过~</p> 
			</div> 
		</div>
		
	</section>
</template>
 
<script>
	export default{
		name:'rechargeRecord',
		data(){
			return{
				haders:[
					{
						name:'充值记录' 
					},
					{
						name:'购卡记录' 
					}
				],
				recordOne:[],
				recordTwo:[],
				ifnullOne:true,
				ifnullTwo:true,
				listOne:[
					{
						price:'96.00',
						oilcard:'25620257777987987',
						type:'充值成功',
						time:'2017-7-25'
					},
					{
						price:'96.00',
						oilcard:'123123123121',
						type:'交易关闭',
						time:'2017-7-25'
					},
					{
						price:'96.00',
						oilcard:'123123123121',
						type:'充值成功',
						time:'2017-7-25'
					},
					{
						price:'96.00',
						oilcard:'123123123121',
						type:'充值成功',
						time:'2017-7-25'
					},
					{
						price:'96.00',
						oilcard:'123123123121',
						type:'充值成功',
						time:'2017-7-25'
					}
					
				], 
				listTwo:[
					{
						price:'2000',
						Number:'25620257777987987',
						Address:'重庆市渝北区宝华大道',
						type:'购买成功',
						time:'2017-7-25'
					},
					{
						price:'2000',
						Number:'25620257777987987',
						Address:'重庆市渝北区宝华大道',
						type:'交易关闭',
						time:'2017-7-25'
					},
					{
						price:'2000',
						Number:'25620257777987987',
						Address:'重庆市渝北区宝华大道',
						type:'购买成功',
						time:'2017-7-25'
					},
					{
						price:'2000',
						Number:'25620257777987987',
						Address:'重庆市渝北区宝华大道',
						type:'购买成功',
						time:'2017-7-25'
					},
					{
						price:'2000',
						Number:'25620257777987987',
						Address:'重庆市渝北区宝华大道',
						type:'购买成功',
						time:'2017-7-25'
					},
					
				],
				cord:0,
				
			}
		},
		created: function() {
			this.urls = this.$store.state.urls;
			this.ImgUrls = this.$store.state.ImgUrls;
			this.isHerde = this.$store.state.Type;
			this.MembersID = this.$store.state.MembersID
		},
		mounted: function() {
			if(!this.$store.state.MembersID){
		  		 this.$router.push({path:'/LoginAll/ToLogin'}) 
		 }
			this.GetOilRechargeOne()
			this.GetOilRechargeTwo()
		},
		methods: {
			//查询充值记录
			GetOilRechargeOne:function(){
				this.$http.get(this.urls+'/WorkMembersOilCard/V1.0/GetOilRecharge',{
					params: {
						"MembersID": this.MembersID
					}
				}).then((res) => { 
					 this.recordOne=res.data.Return_Data.PageData;
					 if(this.recordOne.length>0){
					 	this.ifnullOne=true;
					 }else{
					 	this.ifnullOne=false;
					 } 
				}).catch((err) => {
					console.log(err)
				});
			},
			//查询购买记录
			GetOilRechargeTwo:function(){
				this.$http.get(this.urls+'/WorkMembersOilCard/V1.0/GetBuyEntityOilCardList',{
					params: {
						"MembersID": this.MembersID
					}
				}).then((res) => { 
					 this.recordTwo=res.data.Return_Data.PageData;
					 if(this.recordTwo.length>0){
					 	this.ifnullTwo=true;
					 }else{
					 	this.ifnullTwo=false;
					 } 
					  console.log(this.recordTwo)
				}).catch((err) => {
					console.log(err)
				});
			},
			changNUM:function(index){
				this.cord=index
			}
		}
	}
</script>

<style scoped>
	.items{
		display: block;
	}
	.item-li{
		background: #fff;
		padding: 0.3rem;
		margin-bottom: 1px;
	}
	.item-li h4{
		color: #333333;
		font-family: "微软雅黑";
		font-size: 0.3733333333rem;
	}
	.item-li p{
		font-family: "微软雅黑";
		font-size: 0.2666666666rem;
		color:#999999;
	}
	.item-li span{
		float: right;
	}
	.record span{
		display: inline-block;
		padding: 0.3333333333rem 0.0666666666rem;
		margin: 0 0.2666666666rem;
		border-bottom:0.0666666666rem solid #fff;
	}
	.record span.active{
		border-bottom:0.0666666666rem solid #DF4444;
		color: #DF4444;
	}
	.nullShow{
		text-align: center;
		margin-top:1.3333333333rem;
	}
	.nullShow p{
		font-size: 0.3733333333rem;
		color: #999999;
	}
</style>